var arr = [{src : "../images/430136.jpg",
    name : "战争之影",
    job:"赫卡里姆",
    node:"赫卡里姆是一只披坚执锐的庞然大物，从暗影岛狂奔而出，" +
    "带领着一群幽灵骑兵猎杀鲜活的生命。赫卡里姆是人与野兽的融合体，" +
    "诅咒让他永世狂奔，杀戮让他欣喜若狂，铁蹄让他碾压一切生灵。",
    color:"#F44336",
    color1:"#B71C1C",
    color2: "#FC5050",
    color3 : "#FC9090"
    },
    {src : "../images/433727.jpg",
    name : "无极剑圣",
    job:"易",
    node:"通过远古的无极之道，易大师调节身体并磨练心智，直至身心合一。" +
    "尽管他将暴力作为不得已的选择手段，他优雅迅速的舞剑速度却能让他快速解决问题。" +
    "作为无极之道最后的门徒，易大师将生命奉献于找寻可以继承这份财富的弟子。",
    color:"#E91E63",
    color1:"#89265A",
    color2: "#F8BBD0",
    color3 : "#FCE4EC"
    },
    {src : "../images/463038.jpg",
    name : "坠落天使",
    job:"莫甘娜",
    node:"有一个遥远的地方，那里住着永生飞行的生物，优雅而美丽，" +
    "但远古战争肆虐。和很多战争一样，这场战争让人家破人亡。" +
    "一方宣称自己是完美守序和正义的，他们作战是为了用自己的法律和强力中央统治来统一世界。",
    color:"#9C27B0",
    color1:"#4A148C",
    color2: "#B26FFF",
    color3 : "#C495FC"
    },
    {src : "../images/464199.jpg",
    name : "暴走萝莉",
    job:"金克丝",
    node:"金克丝活着就是为了不计后果的四处肆虐，在她身后留下的只有一片混乱与恐慌。" +
    "她是一名暴躁而残忍的罪犯，她蔑视一切仅仅是因为无聊，她会在她认为最无趣的地方：" +
    "皮尔特沃夫，欢乐地进行带着她烙印的肆虐，以引起混乱。",
    color:"#673AB7",
    color1:"#311B92",
    color2: "#AA9BE8",
    color3 : "#C6BCFC"
    },
    {src : "../images/524284.jpg",
    name : "黑暗之女",
    job:"安妮",
    node:"诺克萨斯里总会有人不同意诺克萨斯最高指挥部的所作所为。诺克萨斯最高指挥部刚镇" +
    "压了自称王储的瑞斯卡里奥发动的政变。他们正准备镇压任何对新政府有异议的行动或组织。" +
    "这群称作灰色秩序的政治与社会的放逐者，试图安静地离开他们的邻居，因为他们追求的是黑暗的秘术知识。",
    color:"#3F51B5",
    color1:"#1A237E",
    color2: "#7686D8",
    color3 : "#9BA5E8"
    },
    {src : "../images/567234.jpg",
    name : "无双剑姬",
    job:"奥菲娜",
    node:"“我以荣誉之名前来杀你。即使你毫无荣誉可言，也一样得死。" +
    "”菲奥娜是瓦洛兰的决斗家中最为可怕的一个，她的名声来自她唐突的举止和精明的头脑，以及与这些相称的对蓝钢刺剑的挥舞速度。",
    color:"#2196F3",
    color1:"#0D47A1",
    color2: "#4D76B4",
    color3 : "#6C8BBF"
}];

//创建对象实例
window.onload = function(){
    for(var i = 0; i<arr.length; i++){
        new ChangeDiv(arr[i]).addChild();
    }
    changeStyle();
};

//opp创建模板
function ChangeDiv(obj){
    this.src = obj.src;
    this.name = obj.name;
    this.job = obj.job;
    this.node = obj.node;
    this.color = obj.color;
    this.color1 = obj.color1;
    this.color2 = obj.color2;
    this.color3 = obj.color3;


    this.content ="<img src='"+ this.src +"' alt='1'/>" +
        "<div class='zan' style='background-color:"+this.color+"'><span class='fa fa-thumbs-o-up'></span></div>" +
        //"<!-- 说明 -->" +
        "<figcaption class='fig1' style='background-color: " + this.color + "'>" +
            "<div class='smallhead' style='background-image: url("+ this.src +")'></div>" +
            "<div>" +
                "<h4>"+this.name+"</h4>" +
                "<p><span class='fa fa-star'></span> "+this.job+"</p>" +
            "</div>"+
        "</figcaption>" +
        //" <!-- 赞同 -->" +
        "<div class='triangle' style='border-bottom-color:"+this.color1+"'></div> " +
        //"<!-- 后面内容 -->" +
        "<article class='article1' style='background-color:"+this.color3+"'>" +
            "<p>"+this.node+"</p>" +
                "<nav style='background-color:"+this.color2+"'>" +
                    "<ul>" +
                        "<li style='background-color:"+this.color1+"'><span class='fa fa-facebook'></span></li>" +
                        "<li style='background-color:"+this.color1+"'><span class='fa fa-twitter'></span></li>" +
                        "<li style='background-color:"+this.color1+"'><span class='fa fa-linkedin'></span></li>" +
                        "<li style='background-color:"+this.color1+"'><span class='fa fa-google-plus'></span></li>" +
                    "</ul>" +
                "</nav>" +
        "</article>";
}

//为模板prototype添加一个方法
ChangeDiv.prototype.addChild = function (){
    var content = document.getElementById("content");
    var fig = document.createElement("figure");     //创建figure

    fig.innerHTML = this.content;           //figure赋值

    content.appendChild(fig);           //添加到界面
};


function changeStyle(){
    var zanArr = document.getElementsByClassName("zan");        //赞手势
    var figArr = document.getElementsByClassName("fig1");       //媒体说明
    var triangleArr = document.getElementsByClassName("triangle");  //三角形
    var smallHeadArr = document.getElementsByClassName("smallhead");    //小头像
    var img1 = document.getElementsByTagName("img");        //大图片
    var artArr = document.getElementsByClassName("article1");   //文字内容


    for(var i = 0 ; i < zanArr.length ; i++){
        zanArr[i].onclick = function(){
            for(var j = 0 ; j < zanArr.length ; j++){
                //判断点击的是当前
                if(zanArr[j] == this){
                    var p1 = artArr[j].getElementsByTagName("p");   //背后p标签
                    var li1 = artArr[j].getElementsByTagName("li"); //背后li标签

                    if(zanArr[j].style.top == "" || zanArr[j].style.top == null || zanArr[j].style.top == undefined){
                        zanArr[j].style.top = "45px";
                        zanArr[j].style.borderColor = arr[j].color3;
                        zanArr[j].style.transform = "rotate(630deg)";
                        zanArr[j].innerHTML = "<span class='fa fa-chevron-up'></span>";
                        figArr[j].style.bottom = "225px";
                        img1[j].style.height = "0";
                        smallHeadArr[j].style.display = "block";
                        triangleArr[j].style.transform = "rotate(-90deg)";
                        triangleArr[j].style.bottom = "210px";
                        p1[0].style.marginTop = "50px";
                        p1[0].style.opacity = 1;

                        setTimeout(function(){li1[0].style.marginTop = "7px"},60);
                        setTimeout(function(){li1[1].style.marginTop = "7px"},120);
                        setTimeout(function(){li1[2].style.marginTop = "7px"},180);
                        setTimeout(function(){li1[3].style.marginTop = "7px"},240);
                    }else{
                        zanArr[j].setAttribute("style","background-color:"+arr[j].color);
                        zanArr[j].innerHTML = "<span class='fa fa-thumbs-o-up'></span>";
                        figArr[j].setAttribute("style","background-color:"+arr[j].color);
                        img1[j].setAttribute("style","");
                        smallHeadArr[j].setAttribute("style","background-image: url("+arr[j].src+")");
                        triangleArr[j].setAttribute("style","border-bottom-color:"+arr[j].color1);
                        p1[0].setAttribute("style","");

                        for(var k = 0 ; k < li1.length ;k ++){
                            li1[k].setAttribute("style","background-color:" + arr[j].color1);
                        }
                    }

                }else{
                    zanArr[j].setAttribute("style","background-color:"+arr[j].color);
                    zanArr[j].innerHTML = "<span class='fa fa-thumbs-o-up'></span>";
                    figArr[j].setAttribute("style","background-color:"+arr[j].color);
                    img1[j].setAttribute("style","");
                    smallHeadArr[j].setAttribute("style","background-image: url("+arr[j].src+")");
                    triangleArr[j].setAttribute("style","border-bottom-color:"+arr[j].color1);

                }

            }
        }
    }
}

